require('../css/details.less');
require('../css/commom/basic.css');

document.ready(function(){
    let videoBox=document.querySelector('.videoBox')
    let numberator=document.querySelector('.numberator')
    let denominator=document.querySelector('.denominator')
    let sportName=document.querySelector('.sportName')
    let left=document.querySelector('.left')
    let center=document.querySelector('.center')
    let right=document.querySelector('.right')
    let progress=document.querySelector('.progress')
    let modal=document.querySelector('.modal')
    let modalPlay=document.querySelector('.modalPlay')
    let modalEnd=document.querySelector('.modalEnd')
    let imgLtself=document.querySelector('.imgLtself')
    let picturContent=document.querySelector('.picturContent')
    // 获取视频信息
    let videoData=JSON.parse(localStorage.getItem('videoData'))
    console.log(videoData);
    // 封装播放 视频函数
    let videoNum=0;
    function playVideo(){
        videoBox.src=commomHttp+ videoData[videoNum].videoUrl;
        numberator.innerHTML=videoNum+1;
        denominator.innerHTML=videoData.length;
        sportName.innerHTML=videoData[videoNum].title;
        
    }
    playVideo()
    // 视频结束时自动播放下一个
    videoBox.addEventListener('ended',function(){
        videoNum++;
        if (videoNum<videoData.length) {
            playVideo()
        }
    })

    // 返回上一个视频
    left.addEventListener('click',function(){
        if (videoNum>0) {
            videoNum--;
            playVideo();
            
        }
        
    })
    // 下一个视频
    right.addEventListener('click',function(){
        videoNum++;
        if (videoNum<videoData.length) {
            playVideo();
            
        }
        
    })
    
    
    //进度条
     setInterval(function() {
        let num=(videoBox.currentTime/videoBox.duration)*100+'%';
        //  let width = document.body.offsetWidth;
        //  let num=(videoBox.currentTime/videoBox.duration)*width;
         progress.style.width=num;
        //  console.log(num);

     },50)

    //  暂停
    center.addEventListener('click',function(){
        videoBox.pause();
        modal.style.display='block';
        modalFn();
    })
    // 渲染页面
    function modalFn(){
        imgLtself.src=commomHttp+videoData[videoNum].imgUrl;
        picturContent.innerHTML=videoData[videoNum].title;
    }
    // 继续训练按钮
    modalPlay.addEventListener('click',function(){
        videoBox.play();
        modal.style.display='none';


    })
    // 结束训练
    modalEnd.addEventListener('click',function(){
        location.href='./running.html'
    })
})